{% import "bootstrap/wtf.html" as wtf -%}
{% import "bootstrap/utils.html" as util -%}
{% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %} lang="
{%- if g.lang -%}
  {{g.lang}}
{%- else -%}
  en
{%- endif -%}
">
{%- block html %}
  <head>
    {%- block head %}
    <title>{% block title %}{{title|default}}{% endblock title %}</title>

    {%- block metas %}
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {%- endblock metas %}
    {% block styles -%}
    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
    <link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet" />
      <style>
      .dont-break-out {
        overflow-wrap: break-word;
        word-wrap: break-word;
        -ms-word-break: break-all;
/*        word-break: break-all;
        word-break: break-word;
*/        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
      }

/* Body */
.dark-theme {
  background-color: #222;
  color: rgb(221, 221, 221);
}

/* Navbar */
.dark-theme .navbar {
  background-color: #333;
  border-color: #080808;
  color: #eee;
  margin-bottom: 0;
}

.dark-theme .navbar-collapse {
  border-color: #080808;
}

/* Navbar header */
.dark-theme .navbar-header {
  color: #eee;
}


/* Buttons */
/* General Button Styling */
.dark-theme .btn {
  background-color: #343a40;
  border-color: #6c757d;
  color: #fff;
  transition: background-color 0.3s ease;
  font-style: initial;
}

/* Primary Button Styling */
.dark-theme .btn-primary {
  color: rgb(47, 253, 47);  
  border-color: rgb(47, 253, 47);
  transition: background-color 0.3s ease;
}

/* Hover State Styling */
.dark-theme .btn:hover,
.dark-theme .btn:focus {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

/* Active State Styling */
.dark-theme .btn:active,
.dark-theme .btn.active {
  background-color: #32CD32;
  border-color: #32CD32;
  box-shadow: none;
  font-style: initial;
}

/* Disabled State Styling */
.dark-theme .btn:disabled,
.dark-theme .btn[disabled] {
  opacity: 0.65;
}


/* List groups */
.dark-theme .list-group {
  background-color: #333;
  border-color: #080808;
  color: #eee;
  margin-bottom: 20px;
}

.dark-theme .list-group-item {
  background-color: #333;
  border-color: #080808;
  color: #eee;
  font-style: initial;
}

.dark-theme .list-group-item:hover,
.dark-theme .list-group-item:focus {
  background-color: #080808;
  border-color: #080808;
  color: #eee;
}

/* Panels */
.dark-theme .panel {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
  color: #333;
}

.dark-theme .panel-heading {
  background-color: #e7e7e7;
  border-color: #d3d3d3;
  color: #333;
}

.dark-theme .panel-heading a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  font-family: 'Press Start 2P', "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-style: initial;
}

@media screen and (min-width: 768px) {
  .dark-theme .panel-heading a {
    
    font-size: 30px;
    line-height: 1;    
  }
}

.dark-theme .h1, .dark-theme .h2, .dark-theme .h3, .dark-theme .h4, .dark-theme .h5, .dark-theme .h6, 
.dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme h5, .dark-theme h6 {
  text-transform: uppercase;
  font-family: 'Press Start 2P';
}
.dark-theme .h1, .dark-theme h1 {
  text-shadow: -1px -1px 0 #0D2,
               1px -1px 0 #000,
               -1px 1px 0 #000,
               1px 1px 0 #000;
}

.dark-theme .panel-default {
  border-color: #080808;
  background-color: #222;
  color: #eee;
}

.dark-theme .panel-default > .panel-heading {
  border-color: #080808;
  background-color: #080808;
  color: #eee;
}

.dark-theme .panel-default > .panel-heading + .panel-body {
  border-top-color: #080808;
}

.dark-theme .panel-body {
  color: #eee;
}




/* Forms */
.dark-theme .form-control {
  background-color: #fff;
  border-color: #ccc;
  color: #555;
}

.dark-theme .form-control:focus {
  border-color: #6bbf59;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.dark-theme .form-group {
  margin-bottom: 15px;
}

.dark-theme .form-label {
  color: #ccc;
}

.dark-theme .form-group.has-error .form-control {
  border-color: #a94442;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ebccd1;
}

.dark-theme .form-group.has-error .help-block {
  color: #a94442;
}

/* Containers */
.dark-theme .container,
.dark-theme .container-fluid {
  background-color: #222;
  color: #eee;
}


/* Badges */
.dark-theme .badge {
  background-color: #555;
  color: #fff;
}

/* Footer */
.dark-theme footer {
  background-color: #222;
  color: #eee;
  padding: 10px;
}


/* Dropdowns */
.dark-theme .dropdown-menu {
  background-color: #222;
  border-color: #080808;
  color: #eee;
}

.dark-theme .dropdown-menu > li > a {
  color: #eee;
}

.dark-theme .dropdown-menu > li > a:hover,
.dark-theme .dropdown-menu > li > a:focus {
  background-color: #080808;
  color: #eee;
}

.dark-theme .dropdown-menu > li > a:focus {
  outline: none;
}

.dark-theme .dropdown-menu > .active > a,
.dark-theme .dropdown-menu > .active > a:hover,
.dark-theme .dropdown-menu > .active > a:focus {
  background-color: #080808;
  color: #eee;
  font-style: initial;
}

.dark-theme .dropdown-header {
  color: #aaa;
}

.dark-theme .dropdown-backdrop {
  background-color: #000;
  opacity: 0.5;
}

.dark-theme .open > .dropdown-toggle {
  background-color: #080808;
  color: #eee;
  border-color: #080808;
}

.dark-theme .open > .dropdown-toggle:hover,
.dark-theme .open > .dropdown-toggle:focus,
.dark-theme .open > .dropdown-toggle:active {
  background-color: #080808;
  color: rgb(133, 255, 133);
  border-color: #080808;
}

.dark-theme .navbar-default .navbar-nav>li>a {
  color: #fff;
  font-style: initial;
}
.dark-theme .navbar-default .navbar-nav>li>a:hover,
.dark-theme .navbar-default .navbar-nav>li>a:focus {
  color: rgb(133, 255, 133);
}

/* Navbar Dropdown */
.dark-theme .navbar-default .navbar-nav>.open>a, 
.dark-theme .navbar-default .navbar-nav>.open>a:focus, 
.dark-theme .navbar-default .navbar-nav>.open>a:hover {
  color: rgb(133, 255, 133);
  background-color: #080808;
  font-style: initial;
}


.dark-theme .navbar-default .navbar-nav .open .dropdown-menu > li > a {
  background-color: #080808;
  color: #eee;
  font-style: initial;
}
.dark-theme .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
  color: rgb(133, 255, 133);
  background-color: #080808;
  font-style: initial;
}

.dark-theme pre {
  background-color: #000;
  color: #eee;
}



/* Modals */
.dark-theme .modal-content {
  background-color: #292b2c;
  color: #fff;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.dark-theme .modal-header {
  background-color: #222;
  border-bottom: 1px solid #080808;
  color: #fff;
}

.dark-theme .modal-title {
  color: #fff;
}

.dark-theme .modal-body {
  color: #fff;
}

.dark-theme .modal-footer {
  background-color: #222;
  border-top: 1px solid #080808;
}




/* Modal Header */
.dark-theme button.close,
.dark-theme .modal-header .close {
  color: #fff;
  opacity: 1;
  text-shadow: none;
}

.dark-theme button.close:hover,
.dark-theme .modal-header .close:hover,
.dark-theme button.close:focus,
.dark-theme .modal-header .close:focus {
  color: #fff;
  opacity: 0.5;
  text-shadow: none;
}

.dark-theme .modal-header .close:hover span,
.dark-theme .modal-header .close:focus span {
  text-decoration: none;
  cursor: pointer;
  color: #fff;
}

.dark-theme a {
  color: rgb(47, 253, 47);
  /* text-shadow: 1px 1px 1px rgba(0, 255, 0, 0.1); */
  font-style: oblique;
}

.dark-theme a:hover,
.dark-theme a:focus,
.dark-theme a:active {
  color: rgb(133, 255, 133);
}

/* input */

.dark-theme input[type="text"],
.dark-theme input[type="password"],
.dark-theme input[type="email"],
.dark-theme input[type="url"],
.dark-theme input[type="tel"],
.dark-theme input[type="number"],
.dark-theme input[type="search"],
.dark-theme input[type="date"],
.dark-theme input[type="month"],
.dark-theme input[type="week"],
.dark-theme input[type="time"],
.dark-theme input[type="datetime"],
.dark-theme input[type="datetime-local"],
.dark-theme input[type="color"],
.dark-theme input[type="submit"],
.dark-theme select,
.dark-theme textarea {
  background-color: #fff;
  border-color: #ccc;
  color: #555;
}



/**
 *  Underline on hover.
 *  - .underline-on-hover part that is hovered.
 *  - .underline-on-hover-underline is the underlined part.
 */
.underline-on-hover:hover .underline-on-hover-underline::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.underline-on-hover-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  transition: transform 0.3s ease-in-out;
}

.underline-on-hover-underline::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #337ab7;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.8s ease-in-out;
}
.dark-theme .underline-on-hover-underline::before {
  background-color: rgb(47, 253, 47);
}

      </style>
    {%- endblock styles %}

    {%- block feeds -%}
      <link rel="alternate" type="application/atom+xml" title="pygame.org news (ATOM feed)" href="http://www.pygame.org/feed/news.php?format=ATOM"/>
      <link rel="alternate" type="application/rss+xml" title="pygame.org news (RSS 2.0 feed)" href="http://www.pygame.org/feed/news.php?format=RSS2.0" />
    {%- endblock feeds %}


    {%- endblock head %}
  </head>
  <body class="dark-theme" {% block body_attribs %}{% endblock body_attribs %}>

    <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>

    {% block body -%}
      {% block navbar %}
      {% if nav %}
        {% cache 60*5 %}
          {{ nav.mynavbar.render() }}
        {% endcache %}
      {% endif %}
      {%- endblock navbar %}

      <div class="container" id="content">
        <div class="row row-offcanvas row-offcanvas-right">
          <div class="col-xs-12 col-sm-9">
          {{util.flashed_messages(dismissible=True, container=False)}}

          {% block content -%}
          {%- endblock content %}
        </div><!--/.col-xs-12.col-sm-9-->
          <div class="col-xs-12 col-sm-3 sidebar-offcanvas" id="sidebar">
          {% block sidebar -%}
            {% if sidebar %}
              {% if current_user and url_for_security %}
              <div class="list-group">
                {% if current_user.is_authenticated %}
                  <a class="list-group-item" href="{{ url_for_security('logout', _external=True) }}">Log Out</a>
                  <a class="list-group-item" href="{{ url_for('project.new_project') }}">Add a new project</a>
                  <a class="list-group-item" href="{{ url_for('project.projects') }}">Your projects</a>
                {% else %}
                  <a class="list-group-item" href="{{ url_for_security('register', _external=True) }}">New members signup</a>
                  <a class="list-group-item" href="{{ url_for_security('login', _external=True) }}">Log In</a>
                {% endif %}
              </div>
              {% endif %}

              {#
              <h2>Artist in Residence</h2>
              <div class="list-group project-releases">
                <a href="https://www.pygame.org/artist-in-residence/1"
                   class="list-group-item">
                  <img class="img-responsive" src="https://www.pygame.org/ftp/artist-in-residence/1/artist-in-residence-1-640.png" alt="Josh Bartlett">

                  <span class="project-title dont-break-out"{{ style_title }}>
                    Josh Bartlett
                  </span>
                </a>
              </div>
              #}

              {% include 'recent-releases.html' %}
            {% endif %}
          {%- endblock sidebar %}
          </div><!--/.sidebar-offcanvas-->
        </div><!--/row-->
        <hr>
        <footer>
          <p></p>
        </footer>
      </div><!--/.container-->

      {% block scripts %}
      <script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
      <script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
      {%- endblock scripts %}
    {%- endblock body %}
  </body>
{%- endblock html %}
</html>
{% endblock doc -%}
